<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
    .current{
        color:red;;
    }
</style>

<div id="app">
    <fruit-list :lists="lists">
        <template slot-scope="slotProps">
            <span  :class="slotProps.info.id==2?'current':''">{{slotProps.info.name}}</span>
        </template>
    </fruit-list>
</div>

<script type="text/javascript">

    Vue.component('fruit-list', {
        props:['lists'],
        template: `
            <ul>
                <li v-for="(item,index) in lists" :key="item.id">
                <slot v-bind:info="item">
                    {{item.name}}
                </slot>
                </li>
            </ul>
        `
    })
    var app = new Vue({
        el: '#app',
        data: {
            lists: [
                {
                    id: 1,
                    name: 'apple'
                },
                {
                    id: 2,
                    name: 'pear'
                },
                {
                    id: 3,
                    name: 'banna'
                },
             ]
        }
    })

</script>

</body>
</html>